<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--引入bootStrap-->
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"/>
    <!--bootstrap 依赖jQuery-->
    <script src="js/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <script src="js/user.check.login.js"></script>

    <link rel="stylesheet" href="css/layui.css" media="all">
    <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
    <title>商品专区</title>
</head>

<body>
<head>
    <div id="header_top">
        <div id="top">
            <div class="Inside_pages" id="div_header">
                <div class="Collection"><a href="user_center.html" class="green"
                                           v-model="userName">欢迎商家会员：{{userName}}</a> <a href="javascript:void(0)"
                                                                                         @click="cancellation"
                                                                                         class="green">退出</a></div>
                <!--<div class="hd_top_manu clearfix">
                    <ul class="clearfix">
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="user_center.html">用户中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="message_center.html">消息中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="goodsList.html">商品分类</a></li>
                    </ul>
                </div>-->
            </div>
        </div>
        <div id="header" class="header page_style">
            <div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>

            <!--结束图层-->
            <div class="Search">
                <div class="search_list">
                    <ul>
                        <li class="current"><a href="#">产品</a></li>
                        <li><a href="#">信息</a></li>
                    </ul>
                </div>
                <div class="clear search_cur">
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                    <input name="" type="submit" value="搜 索" class="Search_btn"/>
                </div>
                <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
            </div>

            <!--购物车样式-->

        </div>

        <!--菜单栏-->
        <div class="Navigation" id="Navigation" style="padding-left: 420px;">
            <ul class="Navigation_name">
                <li><a href="index.html">首页</a></li>
                <li class="hour"><a href="半小时圈主页.html">半小时生活圈</a></li>
                <li><a href="产品-产品列表(预售).html">预售专区</a><em class="hot_icon"></em></li>
                <li><a href="店铺首页.html">好评商户</a></li>
                <li><a href="goodsList.html">热销活动</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell: ".Navigation_name li", trigger: "click"});</script>
    </div>
</head>
<!--商品专区-->
<div class="Inside_pages clearfix">
    <div class="left_style">
        <!--列表-->
        <div class="menu_style">
            <ul class="menu_list">
                <li class="on"><em></em><a href="店铺专区.html">店铺专区</a></li>
                <li><em></em><a href="goods_division.html">商品专区</a></li>
                <li><em></em><a href="order_manage.html">订单专区</a></li>
                <li><em></em><a href="发货管理.html">发货管理</a></li>
            </ul>
        </div>
    </div>
    <!--内容-->
    <div class="right_style">
        <!--内容详细-->
        <div class="title_style"><em></em>商品专区</div>
        <div class="content_style">
            <div class="Products_area_style">
                <las class="Search_Add" id="div_vue">
                    <input id="searchSmall" v-model="inputSearch" class="add_text"/>
                    <span>发布状态：
                    </span><select name="" size="1" v-model="publish">
                    <option value="3">全部</option>
                    <option value="0">已下架</option>
                    <option value="1">已发布</option>
                </select>
                    <input type="button" value="搜索" @click="searchGoodsList()" class="Search_btn"/>
                    <div class="Products_list_style">
                                               <input type="button" class="btn" value="批量删除" @click="deleteAll()"/>

                        <table>
                            <thead>
                            <tr class="title">
                                <td class="checkbox_style"><input name="" type="checkbox" v-model="checkAll"
                                                                  @change="checkAllChange()"/></td>
                                <td class="title_img">商品图片</td>
                                <td class="title_name">商品标题</td>
                                <td class="status">商品价格</td>
                                <td class="inventory">商品库存</td>
                                <td class="status">商品状态</td>
                                <td class="operating">操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <!--       ----------------------------------------------------------------------------------------------------->
                            <tr v-for="(goods,i) in list" :key="i">
                                <td><input type="checkbox" name="" type="checkbox"
                                           v-model="goods.check" @change="curChange()"/></td>
                                <td width="90px"><img :src="goods.goodImg" width="80px"
                                                      height="80px"></td>
                                <td><a href="#">{{goods.goodName}}</a></td>
                                <td>{{goods.goodPrice}}</td>
                                <td>{{goods.goodCount}}</td>
                                <td>
                                    <div v-if="goods.goodUp==1">
                                        已发布
                                    </div>
                                    <div v-if="goods.goodUp==0">
                                        已下架
                                    </div>
                                </td>
                                <td class="operating_btn relative">
                                    <input type="button" class="btn" value="修改库存"
                                           @click="updateById(goods.goodId,goods.goodCount)"/>
                                    <input type="button" class="btn" value="删除" @click="deleteById(goods.goodId)"/>
                                    <input v-if="goods.goodUp == 1" class="btn" @click="updateGoodUp(goods.goodId,0)"
                                           type="button" value="下架">
                                    <input v-if="goods.goodUp == 0" class="btn" @click="updateGoodUp(goods.goodId,1)"
                                           type="button" value="上架">
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        每页显示<select name="" size="1" v-model="per">
                        <option value="5">5条数据</option>
                        <option value="7">7条数据</option>
                        <option value="10">10条数据</option>
                    </select>，共有{{amount}}条数据，
                        当前第{{pareee}}/{{counts}}页
                        <input type="button" value="首页" @click="indexPage()">
                        <input type="button" value="上一页" @click="previousPage()">
                        <input type="button" value="下一页" @click="nextPage()">
                        <input type="button" value="尾页" @click="trailerPage()">
                    </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--网站地图-->
<div class="fri-link-bg clearfix">
    <div class="fri-link">
        <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
        <div class="left"><img src="images/qd.jpg" width="90" height="90"/>
            <p>扫描下载APP</p>
        </div>
        <div class="">
            <dl>
                <dt>新手上路</dt>
                <dd><a href="#">售后流程</a></dd>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">订购方式</a></dd>
                <dd><a href="#">隐私声明 </a></dd>
                <dd><a href="#">推荐分享说明 </a></dd>
            </dl>
            <dl>
                <dt>配送与支付</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>售后保障</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
        </div>
    </div>
</div>
<!--网站地图END-->
<!--网站页脚-->
<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********

                <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        </div>
    </div>
</div>
</body>
</html>

<script>
    let vt = new Vue({
        el: '#div_header',
        data: {
            userName: "",
        },
        methods: {
            //cookie值
            cookieNumber: function () {
                let cookieNum = getCookie("userMassage");
                let user = JSON.parse(cookieNum);
                var userNameValue = user.userName;

                this.userName = userNameValue;

            },
            // 手动绑定click
            // 登出
            cancellation: function () {
                delCookie("userMassage");
                location.href = "login.html";
            },
        },
        mounted: function () {
            this.cookieNumber();
        }
    });

    let vm = new Vue({
        el: '#div_vue',
        data: {
            list: [],               //所有数据
            checkAll: false,    //全选的状态
            checkBox: [],        //复选框选择
            str: "",                 //提示语句
            publish: 3,             //发布状态
            inputSearch: "",         //搜索框

            amount: "",          //总数据
            per: 5,             //显示数据
            counts: "",          //总页数
            pareee: 1,          //当前页数
        },

        methods: {
            //显示列表数据
            showList: function () {

                let url = "merchant/pagingController.do";
                let params = {newPages: this.pareee, pages: this.per};
                this.checkAll = false;
                let thisM = this;
                postWithJson(url, params, function (data) {
                    //展示商品列表数据
                    thisM.list = data;
                });
            },
            //全选
            checkAllChange: function () {
                for (let i = 0; i < this.list.length; i++) {
                    this.list[i].check = this.checkAll;
                }
                ;
            },
            //当前的处理
            curChange: function () {
                //取出打勾的状态  filter()-->对数组进行过滤处理，返回满足条件的数组
                let thisObj = this;
                this.checkAll = this.list.every(function (v) {
                    return v.check;
                })
                //这是一个集合
                let selected = this.list.filter(function (v) {
                    return v.check == true;
                });
                this.checkBox = [];
                for (let i = 0; i < selected.length; i++) {
                    thisObj.checkBox.push(selected[i].goodId)
                }
            },
            //批量删除
            deleteAll: function () {
                let thisObj = this;
                    if (confirm("是否批量删除？")) {
                        thisObj.curChange();
                        for (let i = 0; i < thisObj.checkBox.length; i++) {
                            let params = thisObj.checkBox[i];
                            thisObj.deleteById(params)
                            return;
                        }
                    } else {
                        alert("取消成功")
                    }
            },
            //删除
            deleteById(id) {
                let thisM = this;
                let url = "merchant/deleteByIdController.do";
                postWithJson(url, id, function () {
                    alert("删除成功");
                    thisM.listAll();
                    thisM.showList();
                })
            },

            //上架
            updateGoodUp(goodId, type) {
                let thisM = this;
                if (type == 1) {
                    this.str = "是否上架";
                } else {
                    this.str = "是否下架";
                }
                if (confirm(this.str)) {
                    let params = {goodId: goodId, goodUp: type}
                    let url = "/merchant/goodsUpController.do";
                    postWithJson(url, params, function (data) {
                        thisM.showList();
                        alert("操作成功");
                    });
                }
            },
            //修改
            updateById(id, num) {
                var person = prompt("请输入库存数量：", num);
                if (person == null || person == "") {
                    return;
                } else {
                    let number = Number(person);
                    let thisM = this;
                    let url = "merchant/updateByIdCountController.do";
                    let params = {goodId: id, goodCount: number};
                    postWithJson(url, params, function () {
                        alert("修改成功");
                        thisM.showList();
                    })
                }
            },
            //搜索
            searchGoodsList() {
                let thisM = this;
                let url = "/merchant/SearchController.do";
                let params = {goodName: this.inputSearch, goodUp: this.publish}
                postWithJson(url, params, function (data) {
                    if (data.length == null) {
                        alert("您输入的商品不存在，请重新输入！")
                    }
                    thisM.list = data;
                });
            },


            //计算分页
            MaxPages() {
                let url = "merchant/selectListAllController.do";
                let thisM = this;
                get(url, function (data) {
                    if (thisM.amount == "") {
                        thisM.amount = data.length;
                    } else {
                        thisM.amount = thisM.amount;
                    }
                    counts = thisM.amount / thisM.per;
                    if (counts != Math.ceil(thisM.amount / thisM.per)) {
                        counts = Math.ceil(thisM.amount / thisM.per);
                    }

                    thisM.counts = counts;
                    thisM.amount = thisM.amount;
                });
            },
            //列表数据
            listAll() {
                let url = "merchant/selectListAllController.do";
                let thisM = this;
                get(url, function (data) {
                    thisM.amount = data.length;
                    thisM.MaxPages();
                });


            },
            //首页
            indexPage: function () {
                this.pareee = 1;
                this.listAll();
                this.showList();
            },
            //下一页
            nextPage: function () {
                //发起ajax http请求后台获取数据
                let counts = this.counts;
                this.pareee = this.pareee + 1;
                if (this.pareee > counts) {
                    this.pareee = this.pareee - 1;
                    alert("已经是最后一页了!");
                    return;
                }
                this.MaxPages();
                if (counts > Math.ceil(this.amount / this.per)) {
                    console.log("counts" + counts)
                    this.pareee = this.counts;
                }
                this.showList();
            },
            //上一页
            previousPage: function () {
                //发起ajax http请求后台获取数据
                this.pareee = this.pareee - 1;
                if (this.pareee == 0) {
                    this.pareee = this.pareee + 1;
                    alert("已经是最新页了！")
                    return;
                }
                this.MaxPages();
                let counts = this.counts;
                if (this.pareee > counts) {
                    console.log("counts" + counts)
                    this.pareee = this.counts;
                }
                this.showList();
            },
            //尾页
            trailerPage: function () {
                //发起ajax http请求后台获取数据

                this.listAll();
                this.MaxPages();
                let params = counts;
                this.pareee = params;
                this.showList();
            },
            //列表
            indexList: function () {
                this.listAll();
                this.showList();
            },
        },

        mounted: function () {
            this.indexList();
            this.MaxPages();
        }
    });


</script>